/*
 * @Author: your name
 * @Date: 2021-07-08 16:27:42
 * @LastEditTime: 2021-08-02 10:53:35
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \base-framework-web\src\pages\features\userPermission\user\add\components\tagsBlock\index.tsx
 */
import React, { memo, useState, useEffect, useCallback, useMemo } from 'react';
import { Modal, Button, Select, Tag } from 'antd';

import { TagsBlocklProps } from '@/pages/features/userPermission/user/add/types/interface';

import styels from './index.less';

const TagsBlock = memo((props) => {
  const {
    dataSource,
    removeCurrentTag,
    btnGroupDom = <></>,
    closable,
    simple = false,
  } = props;
  console.log('TagsBlock', props);
  const createTagsDom = useMemo(() => {
    return (
      <>
        {dataSource.map((item, index) => (
          <Tag
            key={item.value}
            closable={closable && !simple}
            style={{ marginBottom: '16px' }}
            onClose={(e) => {
              e.preventDefault();
              removeCurrentTag(item.value);
            }}
          >
            {item.label}
          </Tag>
        ))}
      </>
    );
  }, [dataSource]);

  return (
    <div className={styels.container}>
      {!simple && <div>当前已选择了{dataSource.length}项</div>}
      <div className={styels.tagsContainer}>{createTagsDom}</div>
      {!simple && <div className={styels.btnContainer}>{btnGroupDom}</div>}
    </div>
  );
});

export default TagsBlock;
